<template>
	<view class="empty-content" :style="'padding-top:'+top+';padding-bottom:'+top+';background-color:'+bgColor">
		<image :src="require('@/public/images/components/'+img+'.png')" mode="aspectFit"></image>
		<text>{{text}}</text>
		<button v-if="showRefresh" type="default" @tap="refresh">刷新</button>
	</view>
</template>

<script>
	/**
	 * EmptyContent 空内容
	 * @description 空内容用于数据为空时展示默认效果
	 * @property {String} text 文字提示内容
	 * @property {String} img = [qsy_zwxl|qsy_zwxx|qsy_zwczjl|qsy_zwyhq] 使用的图片名称
	 * @property {String} [top] 距离上下的距离
	 * @property {String} [bgColor] 背景颜色
	 * @property {Boolean} [showRefresh] = [true|false] 是否显示刷新按钮
	 * @example <EmptyContent text="暂无内容" img="qsy_zwxl"></EmptyContent>
	 */
	export default {
		name:"EmptyContent",
		props: {
			text: {
				type: String,
				default: '暂无内容'
			},
			img: {
				type: String,
				default: 'qsy_zwxl'
			},
			top: {
				type: String
			},
			bgColor: {
				type: String
			},
			showRefresh: {
				type: Boolean,
				default: true
			}
		},
		methods: {
			/**
			 * @description 按钮刷新回调
			 */
			refresh() {
				this.$emit('refresh')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
		image{
			width: 280rpx;
			height: 280rpx;
		}
		text{ 
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #B3B3B3;
		}
		button{
			margin-top: 30rpx;
			width: 320rpx;
			height: 88rpx;
			background: #0055FF;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
		}
	}
</style>
